import React from 'react';
import { NavLink, Link } from 'react-router-dom';
import { Form, Input, Button, Row, Col, Checkbox, message, Icon } from 'antd';
import { getStuRegValidCode, getMobilePhoneValidCode } from '../../api';
import { _alert, formatDate } from 'libs/utils';
import './index.less'

const FormItem = Form.Item;

class ImageCodeModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      validCodeImg: '',
    };
  }

  componentDidMount() {
    this.getStuRegValidCode();
  }
  // 获取验证码
  getStuRegValidCode = () => {
    // this.validateImageCode();
    getStuRegValidCode((res) => {
      this.setState({
        validCodeImg: res.data,
      });
    });
  }
  // 确认
  handleSubmit = (e) => {
    e.preventDefault();
    const { form, handleConfirm, mobilePhone } = this.props;
    form.validateFields((err, values) => {
      console.log(values)
      if (!err) {
        const { imageCode } = values;
        const postData = { imageCode, mobilePhone };
        getMobilePhoneValidCode(postData, () => {
          handleConfirm();
        }, () => {
          form.resetFields(['imageCode']);
          form.validateFields(['imageCode'], { force: true });
          this.getStuRegValidCode();
        });
        // studentRegistry(postData, () => {
        //   this.props.history.push('/student_center/personal_center');
        //   form.resetFields();
        //   // this.setState({
        //   //   dialogIsShow: true
        //   // })
        // }, this.getStuRegValidCode);
      }
    });
  }
  handleClose = () => {
    const { handleCloseModal } = this.props;
    handleCloseModal();
  }
  validateImageCode = (rule, value, callback) => {
    // callback('请输入正确的验证码');
    console.log(value)
  }
  render() {
    const { validCodeImg } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="image-code-form">
        <span className="image-close" onClick={this.handleClose}></span>
        <p className="image-title">图形验证码</p>
        <Form onSubmit={this.handleSubmit} onKeyDown={(e) => { if (e.keyCode == 13) { e.preventDefault(); } }}>
          <FormItem style={{ marginBottom: 0, height: 64 }}>
            <div className="con-left">
            {getFieldDecorator('imageCode', {
                  rules: [
                    { required: true, message: '请输入正确的图形验证码' },
                    // { validator: (rule, value, callback, source) => {
                    //   this.validateImageCode(value, callback, '请输入正确的验证码')
                    // } },
                  ],
                })(<p><Input 
                  size="large"
                  prefix={<Icon type="safety" style={{ color: '#bbb', fontSize: 18 }} />}
                  placeholder="请输入图形验证码" autoComplete="off" /></p>)}
            </div>
            <div className="con-right" onClick={this.getStuRegValidCode}>
              <img style={{ width: 100, height: 40, cursor: 'pointer', verticalAlign: 'top' }} src={validCodeImg} alt="" />
            </div>
            {/* <Row gutter={16}>
              <Col span={16}>
                {getFieldDecorator('imageCode', {
                  rules: [
                    { required: true, message: '图形验证码不能为空' },
                  ],
                })(<p><Input 
                  size="large"
                  prefix={<Icon type="safety" style={{ color: '#bbb', fontSize: 18 }} />}
                  placeholder="请输入图形验证码" autoComplete="off" /></p>)}
              </Col>
              <Col span={8} onClick={this.getStuRegValidCode}>
                <img style={{ width: 100, height: 40, cursor: 'pointer' }} src={validCodeImg} alt="" />
              </Col>
            </Row> */}
          </FormItem>
          <Button type="primary" htmlType="submit" className="login-form-button">确认</Button>
        </Form>
      </div>
    );
  }
}

const WrapImageCode = Form.create()(ImageCodeModal);

export default WrapImageCode